<template>
  <div>
    <Edit title="Reading record" :edit="true" :updataArr="historyShowList" />
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :hide-on-single-page="true"
        :current-page.sync="currentPage3"
        :page-size="12"
        layout="prev, pager, next, jumper"
        :total="historyList.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Edit from "../../components/HistoryChild/Edit.vue";
export default {
  data() {
    return {
      historyList: [],//总数组
      historyShowList: [],//显示数组
      currentPage3: 1,
    };
  },
  methods: {
    // 点击分页
    handleSizeChange(val) {
        this.historyShowList = this.historyList.slice((val - 1) * 12, val * 12)
        console.log(val);
    },
    handleCurrentChange(val) {
        console.log(val);
        this.historyShowList = this.historyList.slice((val - 1) * 12, val * 12)
    },
  },
  created() {
    this.historyList = JSON.parse(localStorage.getItem("searchHistory"));
    this.historyShowList = this.historyList.slice(0, 12);
    console.log(this.historyList);
  },
  components: {
    Edit,
  },
};
</script>
 
<style lang = "less" scoped>
.pagination {
  width: 1160px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin-bottom: 30px; */
  margin: 0 auto 30px;
}
</style>